<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>批改结果 - 智能教育系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            margin: 0;
            padding-top: 80px;
        }

        .result-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 2rem;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .result-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .result-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(110, 142, 251, 0.1), transparent);
            transform: translateX(-100%);
            transition: transform 0.5s ease;
        }

        .result-card:hover::before {
            transform: translateX(100%);
        }

        .result-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 25px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            border: none;
            font-weight: 600;
        }

        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
            transform: translateX(-100%);
            transition: transform 0.5s ease;
        }

        .btn-primary:hover::before {
            transform: translateX(100%);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(110, 142, 251, 0.3);
        }

        .score-badge {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            display: inline-block;
        }

        .status-badge {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            display: inline-block;
        }

        .status-badge.pending {
            background: #fef3c7;
            color: #92400e;
        }

        .status-badge.graded {
            background: #dcfce7;
            color: #166534;
        }

        .exam-image {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <!-- 引入导航栏 -->
    <div th:replace="~{fragments/navbar :: navbar}"></div>

    <div class="result-container">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-3xl font-bold text-gray-800">批改结果</h1>
            <a th:href="@{/exam/grade}" class="btn-primary">返回批改页面</a>
        </div>

        <!-- 提示消息 -->
        <div th:if="${success}" class="alert bg-green-100 text-green-700" th:text="${success}"></div>
        <div th:if="${error}" class="alert bg-red-100 text-red-700" th:text="${error}"></div>

        <div class="result-card p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 考试信息 -->
                <div>
                    <h2 class="text-xl font-semibold mb-4">考试信息</h2>
                    <div class="space-y-4">
                        <div>
                            <label class="text-gray-600">考试名称：</label>
                            <span th:text="${record.exam.examName}"></span>
                        </div>
                        <div>
                            <label class="text-gray-600">科目：</label>
                            <span th:text="${record.exam.subject}"></span>
                        </div>
                        <div>
                            <label class="text-gray-600">学生姓名：</label>
                            <span th:text="${record.studentName}"></span>
                        </div>
                        <div>
                            <label class="text-gray-600">提交时间：</label>
                            <span th:text="${#temporals.format(record.createdAt, 'yyyy-MM-dd HH:mm:ss')}"></span>
                        </div>
                        <div>
                            <label class="text-gray-600">状态：</label>
                            <span class="status-badge" th:classappend="${record.status == 'PENDING' ? 'pending' : 'graded'}"
                                  th:text="${record.status == 'PENDING' ? '待批改' : '已批改'}"></span>
                        </div>
                        <div th:if="${record.score != null}">
                            <label class="text-gray-600">得分：</label>
                            <span class="score-badge" th:text="${record.score}"></span>
                        </div>
                    </div>
                </div>

                <!-- 试卷图片 -->
                <div>
                    <h2 class="text-xl font-semibold mb-4">试卷图片</h2>
                    <div class="relative">
                        <img th:if="${record.examImage != null}" 
                             th:src="@{'/exam/image/' + ${record.id}}" 
                             alt="试卷图片" 
                             class="exam-image">
                        <div th:unless="${record.examImage != null}" 
                             class="text-gray-500 text-center py-8">
                            暂无试卷图片
                        </div>
                    </div>
                </div>
            </div>

            <!-- 批改意见 -->
            <div class="mt-6" th:if="${record.comments != null}">
                <h2 class="text-xl font-semibold mb-4">批改意见</h2>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <p th:text="${record.comments}"></p>
                </div>
            </div>

            <!-- 答案要求 -->
            <div class="mt-6" th:if="${record.answerRequirements != null}">
                <h2 class="text-xl font-semibold mb-4">答案要求</h2>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <p th:text="${record.answerRequirements}"></p>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 